<!-- 开始挑战 -->
<template>
    <div class="chal-start challenge">
        <div class="chal-con">
            <div class="chal-con-box">
                <img class="start-title" src="@/assets/img/main/chal-title.png" alt="">
                <div class="book-name">{{book.bookName}}</div>
                <div class="book-author">{{book.bookCountry}} · {{book.bookAuthor}}</div>
                <div class="chal-num">共{{questionNum}}题</div>
            </div>
            <div class="chal-data-box">
                <div class="chal-data clearfix">
                    <ul class="left">
                        <li class="left" v-for="(item,index) in avatarList" :key="index">
                            <img :src="item" alt="">
                        </li>
                        <li class="left more"></li>
                    </ul>
                    <span>已有 <i>{{finishNum}}</i> 人完成了挑战 </span>
                </div>
            </div>
            <div class="chal-btn" @click="goChallenge()">开始挑战</div>
        </div>
    </div>
</template>

<script>
import { axGet,axPost } from '@/api/index'

export default {
    name: "challengeStart",
    data(){
        return{
            userid:this.$parent.myInfo.UserId,
            bookid:this.$route.query.bookid,   // 书本编号
            book:{},        //书本对象
            questionNum:0,
            avatarList:[],  //头像列表
            finishNum:0,      //任务创建人数
           
        }
    },
    watch:{
        
    },
    created(){ 
        this.$parent.menuShow=false;
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            this.book = JSON.parse(sessionStorage.getItem("thisBook")) 
            this.getQuestion()
            this.getTaskData()
        }
    },
    mounted(){
    },
    methods:{
        //去挑战
        goChallenge(){
            this.$router.replace({path:'/challenge',query: {bookid:this.bookid,questionnum:this.questionNum}});
        },
        // 获取题目
        getQuestion() {
            axGet('GetBookQuestionList', {
                BookId: this.bookid
            }).then(res => {
                if(res.ResultCode === 1) {
                    this.questionNum=res.Value.totalRecords
                    // sessionStorage.setItem("questionList",JSON.stringify(res.Value.list))
                }
            })
        },
        //获取任务打卡人数
        getTaskData(){
            axGet('GetBookAnswerUser', {
                // UserId:this.userid,
                bookId:this.bookid,
            }).then(res => {
                if(res.ResultCode==1){
                    this.avatarList = res.Value.avatarList ? res.Value.avatarList.slice(0,5) : []
                    this.finishNum = res.Value.playUserCount
                }
            })
        },
        
    }
}
</script>
<style type="text/css" scoped>
.chal-start{
    padding-top: 0.32rem;
    padding-bottom: 0.84rem;
}
.chal-con{
    padding: 0.4rem 0 2rem;
}
.start-title{
    width: 5.72rem;
    height: auto;
    display: block;
    margin: 0 auto;
}
.book-name{
    padding: 1.86rem 1.1rem 0.2rem;
    font-size: 0.48rem;
    line-height: 0.6rem;
    text-align: center;
    font-weight: bold;
}
.book-author{
    color: #999;
    font-size: 0.26rem;
    padding: 0 1.1rem;
    text-align: center;
}
.chal-num{
    width: 2.2rem;
    padding: 0.2rem 0;
    color: #02affe;
    font-size: 0.32rem;
    background: #e5f7ff;
    border-radius: 0.36rem;
    line-height: 1;
    margin: 0.6rem auto 0;
    text-align: center;
}
.chal-data-box{
    position: absolute;
    bottom: 1.32rem;
    left: 0;
    width: 100%;
    display:-webkit-box;  
	display:-webkit-flex; 
	display: flex;
	-webkit-justify-content: center;
    justify-content: center;
    line-height: 0.42rem;
}
.chal-data li{
    width: 0.4rem;
    height: 0.4rem;
    border:1px solid #fff;
    border-radius: 50%;
    margin-right: -0.16rem;
    overflow: hidden;
}
.chal-data li img{
    width: 100%;
    height: 100%;
}
.chal-data li.more{
    background:#ebeef2 url(~@/assets/img/icon/ellipsis.png) no-repeat center center;
    background-size: 0.26rem 0.06rem;  
}
.chal-data span{
    font-size: 0.26rem;
    color: #999;
    padding-left: 0.3rem;
}
.chal-data i{
    color: #666;
}
</style>